<style>
.highlight {
    background-color:rgba(255, 255, 0, 0.267);
    font-size:100%
}
input[type="number"], input[type="text"], input[type="checkbox"], select {
    background-color : #d1d1d1; 
    accent-color: #d1d1d1
}
input[type="checkbox"] {
    accent-color: #9b59b6;
}


.inf { color: #197575; }
.err { color: #ff0000; }
.war { color: #ff8000; }
.dbg { color: #808080; }
.ver { color: #008000; }
.sil { color: #808080; }
.consoletable {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 30px;
}
.tcol {
    text-align: left;
    vertical-align: text-top;
    padding: 5px;

}
tr:nth-child(even){background-color: #f2f2f2} 
.dark-mode tr:nth-child(even){background-color: #1e1e1e}

</style>
<div class="row">
    <div class="col">
        <select ng-model="ctrl.lines" ng-disabled="ctrl.loading==true">
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="250">250</option>
            <option value="500">500</option>
        </select>
        <input type="checkbox" ng-checked="ctrl.paused"
        ng-click="ctrl.paused = !ctrl.paused" value="1" id="ctrl.paused" /><span ng-click="ctrl.paused = !ctrl.paused">pause output </span>
        <input type="checkbox" ng-checked="ctrl.model.log_to_exchange"
        ng-click="ctrl.model.log_to_exchange = !ctrl.model.log_to_exchange; ctrl.submit()" value="1" id="ctrl.model.log_to_exchange" /><span ng-click="ctrl.model.log_to_exchange = !ctrl.model.log_to_exchange; ctrl.submit()">enabled streaming</span> (can impact performance) Select log group below
        <input type="checkbox" ng-checked="ctrl.host"
        ng-click="ctrl.host = !ctrl.host" value="1" id="ctrl.host" /><span ng-click="ctrl.host = !ctrl.host">host</span>
        <input type="checkbox" ng-checked="ctrl.agent"
        ng-click="ctrl.agent = !ctrl.agent" value="1" id="ctrl.agent" /><span ng-click="ctrl.agent = !ctrl.agent">agent</span>
        <input type="checkbox" ng-checked="ctrl.cls"
        ng-click="ctrl.cls = !ctrl.cls" value="1" id="ctrl.cls" /><span ng-click="ctrl.cls = !ctrl.cls">cls</span>
        <input type="checkbox" ng-checked="ctrl.func"
        ng-click="ctrl.func = !ctrl.func" value="1" id="ctrl.func" /><span ng-click="ctrl.func = !ctrl.func">func</span>
        <button ng-click="ctrl.messages=[]">Clear</button>
        <br>
        <input type="checkbox" ng-checked="ctrl.model.log_cache"
        ng-click="ctrl.model.log_cache = !ctrl.model.log_cache; ctrl.submit()" value="1" id="ctrl.model.log_cache" /><span ng-click="ctrl.model.log_cache = !ctrl.model.log_cache; ctrl.submit()">cache</span>
        <input type="checkbox" ng-checked="ctrl.model.log_amqp"
        ng-click="ctrl.model.log_amqp = !ctrl.model.log_amqp; ctrl.submit()" value="1" id="ctrl.model.log_amqp" /><span ng-click="ctrl.model.log_amqp = !ctrl.model.log_amqp; ctrl.submit()">amqp</span>
        <input type="checkbox" ng-checked="ctrl.model.log_websocket"
        ng-click="ctrl.model.log_websocket = !ctrl.model.log_websocket; ctrl.submit()" value="1" id="ctrl.model.log_websocket" /><span ng-click="ctrl.model.log_websocket = !ctrl.model.log_websocket; ctrl.submit()">websocket</span>
        <input type="checkbox" ng-checked="ctrl.model.log_webserver"
        ng-click="ctrl.model.log_webserver = !ctrl.model.log_webserver; ctrl.submit()" value="1" id="ctrl.model.log_webserver" /><span ng-click="ctrl.model.log_webserver = !ctrl.model.log_webserver; ctrl.submit()">webserver</span>
        <input type="checkbox" ng-checked="ctrl.model.log_oauth"
        ng-click="ctrl.model.log_oauth = !ctrl.model.log_oauth; ctrl.submit()" value="1" id="ctrl.model.log_oauth" /><span ng-click="ctrl.model.log_oauth = !ctrl.model.log_oauth; ctrl.submit()">oauth</span>
        <input type="checkbox" ng-checked="ctrl.model.log_database"
        ng-click="ctrl.model.log_database = !ctrl.model.log_database; ctrl.submit()" value="1" id="ctrl.model.log_database" /><span ng-click="ctrl.model.log_database = !ctrl.model.log_database; ctrl.submit()">database</span>
        <input type="checkbox" ng-checked="ctrl.model.log_grafana"
        ng-click="ctrl.model.log_grafana = !ctrl.model.log_grafana; ctrl.submit()" value="1" id="ctrl.model.log_grafana" /><span ng-click="ctrl.model.log_grafana = !ctrl.model.log_grafana; ctrl.submit()">grafana</span>
        <input type="checkbox" ng-checked="ctrl.model.log_housekeeping"
        ng-click="ctrl.model.log_housekeeping = !ctrl.model.log_housekeeping; ctrl.submit()" value="1" id="ctrl.model.log_housekeeping" /><span ng-click="ctrl.model.log_housekeeping = !ctrl.model.log_housekeeping; ctrl.submit()">housekeeping</span>
        <input type="checkbox" ng-checked="ctrl.model.log_login_provider"
        ng-click="ctrl.model.log_login_provider = !ctrl.model.log_login_provider; ctrl.submit()" value="1" id="ctrl.model.log_login_provider" /><span ng-click="ctrl.model.log_login_provider = !ctrl.model.log_login_provider; ctrl.submit()">login_provider</span>
        <input type="checkbox" ng-checked="ctrl.model.log_otel"
        ng-click="ctrl.model.log_otel = !ctrl.model.log_otel; ctrl.submit()" value="1" id="ctrl.model.log_otel" /><span ng-click="ctrl.model.log_otel = !ctrl.model.log_otel; ctrl.submit()">otel</span>
        <input type="checkbox" ng-checked="ctrl.model.log_blocked_ips"
        ng-click="ctrl.model.log_blocked_ips = !ctrl.model.log_blocked_ips; ctrl.submit()" value="1" id="ctrl.model.log_blocked_ips" /><span ng-click="ctrl.model.log_blocked_ips = !ctrl.model.log_blocked_ips; ctrl.submit()">blocked_ips</span>

        <input type="checkbox" ng-checked="ctrl.model.log_openapi"
        ng-click="ctrl.model.log_openapi = !ctrl.model.log_openapi; ctrl.submit()" value="1" id="ctrl.model.log_openapi" /><span ng-click="ctrl.model.log_openapi = !ctrl.model.log_openapi; ctrl.submit()">open-api</span>

        <br /><input type="checkbox" ng-checked="ctrl.model.log_database_queries"
        ng-click="ctrl.model.log_database_queries = !ctrl.model.log_database_queries; ctrl.submit()" value="1" id="ctrl.model.log_database_queries" /><span ng-click="ctrl.model.log_database_queries = !ctrl.model.log_database_queries; ctrl.submit()">database queries</span>
        <input type="number" ng-model="ctrl.model.log_database_queries_ms" ng-blur="ctrl.submit()" min="0" max="240000" />ms

        <br /> <strong>On high volume systems, these 3 can crash your system!!!</strong> 
        <input type="checkbox" ng-checked="ctrl.model.log_debug"
        ng-click="ctrl.model.log_debug = !ctrl.model.log_debug; ctrl.submit()" value="1" id="ctrl.model.log_debug" /><span ng-click="ctrl.model.log_debug = !ctrl.model.log_debug; ctrl.submit()" >debug</span>
        <input type="checkbox" ng-checked="ctrl.model.log_verbose"
        ng-click="ctrl.model.log_verbose = !ctrl.model.log_verbose; ctrl.submit()" value="1" id="ctrl.model.log_verbose" /><span ng-click="ctrl.model.log_verbose = !ctrl.model.log_verbose; ctrl.submit()">verbose</span>
        <input type="checkbox" ng-checked="ctrl.model.log_silly"
        ng-click="ctrl.model.log_silly = !ctrl.model.log_silly; ctrl.submit()" value="1" id="ctrl.model.log_silly" /><span ng-click="ctrl.model.log_silly = !ctrl.model.log_silly; ctrl.submit()">silly</span>
        <button ng-click="ctrl.ClearCache()">Clear cache</button>
        <button ng-click="ctrl.MemoryDump()">memory dump</button>
        <br> Click on message to copy log object with all properties to clipboard
        <br>
        search <input type="text" ng-model="ctrl.searchstring" placeholder="Search string" />
    </div>
</div>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<table class="consoletable">
    <thead>
        <tr>
            <th ng-show="ctrl.host==true">Host</th>
            <th>Level</th>
            <th ng-show="ctrl.cls==true">Class</th>
            <th ng-show="ctrl.func==true">Function</th>
            <th ng-show="ctrl.agent==true">Agent</th>            
            <th ng-show="ctrl.hasprop('collection')">col</th>
            <th ng-show="ctrl.hasprop('user')">user</th>
            <th ng-show="ctrl.hasprop('ms')">Ms</th>
            <!-- <th ng-show="ctrl.hasprop('count')">Count</th> -->
            <th>Message</th>
        </tr>
    </thead>
    <tr ng-repeat="model in ctrl.messages track by $index" class="trow" ng-show="ctrl.ismatch(model)">
        <td class="tcol" ng-show="ctrl.host==true">{{model.host}}</td>
        <td class="tcol" ng-class="model.lvl">{{model.lvl}}</td>
        <td class="tcol" ng-show="ctrl.cls==true">{{model.cls}}</td>
        <td class="tcol" ng-show="ctrl.func==true"><span ng-bind-html="ctrl.highlight(model.func)"></span></td>
        <td class="tcol" ng-show="ctrl.agent==true"><span ng-bind-html="ctrl.highlight(model.agent)"></span></td>
        <td class="tcol" ng-show="ctrl.hasprop('collection')"><span ng-bind-html="ctrl.highlight(model.collection)"></span></td>
        <td class="tcol" ng-show="ctrl.hasprop('user')"><span ng-bind-html="ctrl.highlight(model.user)"></span></td>
        <td class="tcol" ng-show="ctrl.hasprop('ms')">{{model.ms}}</td>
        <!-- <td class="tcol" ng-show="ctrl.hasprop('count')">{{model.count}}</td> -->
        <td class="tcol" ng-class="model.lvl"><span ng-bind-html="ctrl.highlight(model.message)" ng-click="ctrl.CopySecret(model)"></span></td>
    </tr>
</table>
    

